<template>
    <div class="article-container">
        <!-- 返回按钮 -->
        <div class="back-btn" @click="goBack">
            <van-icon name="arrow-left" size="20" color="#333"/>
        </div>
        
        <!-- 文章内容 -->
        <div class="article-content" v-if="article">
            <h1 class="title">{{ article.title }}</h1>
            <div class="meta">
                <span class="time">{{ article.createTime }}</span>
            </div>
            <div class="cover-image" v-if="article.coverImg">
                <img :src="article.coverImg" :alt="article.title">
            </div>
            <div class="content" v-html="article.content"></div>
        </div>
        
        <!-- 加载状态 -->
        <div class="loading" v-else>
            <van-loading type="spinner" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getArticleDetail } from '../api';
import { showToast, Icon } from 'vant';

const route = useRoute();
const router = useRouter();
const article = ref(null);

// 获取文章详情
const getDetail = async () => {
    try {
        // 从路由参数中获取 id
        const id = route.params.id;
        const res = await getArticleDetail(id);
        if (res.data.code === 200) {
            article.value = res.data.data;
        } else {
            showToast('获取文章失败');
        }
    } catch (error) {
        console.error('获取文章详情失败：', error);
        showToast('获取文章失败');
    }
};

// 返回上一页
const goBack = () => {
    router.back();
};

onMounted(() => {
    getDetail();
});
</script>

<style lang="scss" scoped>
.article-container {
    padding: 20px;
    min-height: 100vh;
    background: url('@/assets/images/articleBack.png') no-repeat center center;
    background-size: cover;  // 确保背景图片完全覆盖
    position: relative;
    
    // 添加一个白色半透明遮罩，让内容更易读
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        z-index: 0;
    }
    
    // 让内容显示在遮罩层上面
    .back-btn {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 11;  // 增加 z-index 确保在最上层
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        
        &:active {
            background: rgba(245, 245, 245, 0.9);
        }
    }
    
    .article-content {
        position: relative;
        z-index: 1;  // 确保内容在遮罩层上面
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 16px;
            padding-top: 20px;
        }
        
        .meta {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .cover-image {
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            
            img {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
        }
        
        .content {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            
            ::v-deep(img) {
                max-width: 100%;
                height: auto;
                margin: 10px 0;
            }
            
            ::v-deep(p) {
                margin: 16px 0;
            }
        }
    }
    
    .loading {
        position: relative;
        z-index: 1;  // 确保加载状态在遮罩层上面
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
    }
}
</style>